<template>
  <!-- <div class="content-wrapper"> -->
  <!-- <div class="content-header">待办事项</div>
    <el-divider></el-divider> -->
  <!-- <div class="content-container"> -->
  <div>
    <el-table
      v-loading="listLoading"
      height="500"
      :data="list"
      highlight-current-row
    >
      <el-table-column
        label="流程类型"
        prop="flowTypeName"
        width="120"
        sortable
      />
      <el-table-column
        label="文件编号"
        prop="documentCode"
        min-width="220"
        sortable
      />
      <el-table-column
        label="文件名称"
        prop="documentName"
        min-width="200px"
        show-overflow-tooltip
      />
      <el-table-column
        label="紧急程度"
        prop="urgentName"
        width="100px"
        align="center"
      />
      <el-table-column
        label="申请原因"
        prop="reason"
        align="left"
        show-overflow-tooltip
        min-width="200px"
      />
      <el-table-column
        label="申请人"
        align="left"
        show-overflow-tooltip
        min-width="200px"
      >
        <template scope="{row}">
          <el-tag v-if="row.createUserName">
            {{ row.createUserName + '(' + row.createUserGroupName + ')' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="当前阶段" prop="phaseName" width="100px" />
      <el-table-column label="更新时间" prop="accessTimeString" width="150px" />
      <el-table-column label="操作" align="center" width="60" fixed="right">
        <template slot-scope="{ row }">
          <el-dropdown trigger="click" class="filter-item">
            <el-button type="text"><i class="el-icon-more" /></el-button>
            <el-dropdown-menu slot="dropdown" class="user-dropdown">
              <!-- <el-dropdown-item @click.native.prevent="preview(row)"
                    >查看</el-dropdown-item
                  > -->
              <el-dropdown-item
                v-if="row.flowType != 6"
                @click.native.prevent="handle(row)"
                >处理</el-dropdown-item
              >
              <el-dropdown-item
                v-if="row.flowType == 6"
                @click.native.prevent="audit(row)"
                >处理</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page-number.sync="listQuery.pageNumber"
      :page-size.sync="listQuery.pageSize"
      @pagination="getList"
    />
    <el-dialog title="取消流程申请" :visible.sync="dialogVisible" class="mini">
      <el-form label-width="80px">
        <el-form-item label="申请原因">
          <el-input
            v-model.trim="reason"
            type="textarea"
            placeholder="请输入内容"
            maxlength="200"
            show-word-limit
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="处理意见">
          <el-radio v-model="temp.radio" label="1">同意</el-radio>
          <el-radio v-model="temp.radio" label="2">拒绝</el-radio>
        </el-form-item>
        <el-form-item v-if="this.temp.radio == 2" label="审批意见">
          <el-input
            v-model.trim="temp.reason"
            type="textarea"
            placeholder="请输入内容"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <!-- :before-close="handleClose" -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="cancelApply">确 定</el-button>
      </span>
    </el-dialog>
  </div>
  <!-- </div> -->

  <!-- </div> -->
</template>

<script>
import Pagination from '@/components/Pagination'
import {
  pageTodo,
  getPhase,
  getFlow,
  getPhaseSmall,
  pushAuditlApply
} from '@/api/xd/documentFlow'

export default {
  components: { Pagination },
  data() {
    return {
      flowName: {
        1: '新增流程',
        2: '修订流程',
        3: '作废流程',
        4: '下载流程',
        5: '借阅流程'
      },
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 50
      },
      list: [],
      total: 10,
      listLoading: false,
      path: {},
      dialogVisible: false,
      radio: '',
      temp: {},
      reason: ''
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handle(row) {
      var obj = JSON.stringify(row)
      if (row.flowType == 1 || row.flowType == 2) {
        this.$router.push({
          path: getFlow(row.flowType) + row.documentFlowId,
          query: {
            phase: getPhase(row.phase),
            documentFlowId: row.documentFlowId
          }
        })
      } else {
        this.$router.push({
          path: getFlow(row.flowType) + row.documentFlowId,
          query: {
            phase: getPhaseSmall(row.phase)
          }
        })
      }
    },
    preview(row) {
      this.$router.push({
        path: '/flow/flow_preview',
        query: {
          phase: getPhaseSmall(row.phase),
          row: row
        }
      })
    },
    toProcess(val, obj) {},
    getList() {
      this.listLoading = true
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      pageTodo(this.listQuery)
        .then((res) => {
          this.list = res.data.rows
          this.total = res.data.total
          this.$store.commit('message/FLOW_COUNT', res.data.total)
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    // 取消流程审批
    audit(row) {
      this.dialogVisible = true
      this.temp.documentFlowId = row.documentFlowId
      this.reason = row.reason
    },
    cancelApply() {
      const data = {
        documentFlowId: this.temp.documentFlowId,
        reason: this.temp.reason,
        result: this.temp.radio
      }
      pushAuditlApply(data).then((res) => {
        if (res.code == 1) {
          this.$message.success('提交成功')
          this.getList()
          this.temp = {}
        }
      })
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
</style>
